import React from 'react'
import ReactDOM from 'react-dom'

class ChildCom extends React.Component {
  render () {
    let headerCom
    console.log(this.props)
    this.props.children.forEach(item => {
      if (item.props['data-index'] === '1') {
        // 重点看的位置
        headerCom = item
      }
    })
    return (
      <div>
        {/* 重点看的位置 */}
        { this.props.children }
        { headerCom }
      </div>
    )
  }
}

class ParentCom extends React.Component {
  constructor (props) {
    super(props)
    this.state = {

    }
  }
  render () {
    return (
      <div>
        <ChildCom>
          <h1 data-index="1" data-desc="a">bear</h1>
          <h2 data-index="2" data-desc="b">rubbit</h2>
          <h3 data-index="3" data-desc="c">cat</h3>
        </ChildCom>
      </div>
    )
  }
}

ReactDOM.render(<ParentCom />, document.getElementById('root'))
